<template>
  <!-- 后台首页 -->
  <div class="MaxBox">

    <div class="top">
      <data-item v-for="(item,index) in dataList" :key="index" :data="item"></data-item>
    </div>

    <!-- 图表大盒子 -->
    <div class="chartMaxBox">
        <line-chart :data="totalData"></line-chart>
    </div>
  </div>
</template>

<script>
import DataItem from "./components/DataItem.vue";
// import * as echarts from "echarts";
import {statsTotal} from '@/api/stats.js'
// 导入 echarts 公共组件
import LineChart from '@/components/LineChart.vue'


export default {
  data() {
    return {
      // 图标的数据
      totalData:'',
 
      dataList:[
				{
					icon:"icon-dingdan",
					iconColor:"#1296db",
					title:"总订单",
					num:102400
				},{
					icon:"icon-qian",
					iconColor:"#d4237a",
					title:"总销售额",
					num:144554
				},{
					icon:"icon-dingdan1",
					iconColor:"#1296db",
					title:"今日订单数",
					num:65455
				},{
					icon:"icon-qian4",
					iconColor:"#1afa29",
					title:"今日销售额",
					num:12588
				},
			]
    };
  },
 components: {
    DataItem,
    LineChart,
  },
   
  methods: {
    // 请求chart
   async getTotalData(){
      let res = await statsTotal();
      // console.log(res);
      this.totalData=res.data.data;
      console.log(this.totalData);
    }
  },
 

  mounted() {
  },

  created(){
    this.getTotalData();
  },

};
</script>

<style lang="less" scoped>
.MaxBox {
  width: 100%;
  height: 100%;
  .top {
    display: flex;
    justify-content: space-around;
    width: 100%;
    height: 74px;
   margin: 20px auto 45px auto;
  }
}

.icon-qian {
  color: #d4237a;
}
.icon-dingdan1 {
  color: #1296db;
}
.icon-qian4 {
  color: #1afa29;
}
span {
  display: inline-block;
  margin-top: 10px;
  font-weight: bold;
}

.chartMaxBox {
  width: 100%;
  height: 450px;

}
</style>